<template>
    <div class="offline">
        <!-- 头部布局 -->
        <div class="top">
            <div class="left">
                <span>直播主题</span>
                <input type="text" v-model="valueOne" class="inputOne" />
            </div>
<!--            <div class="time">-->
<!--                <span>直播时间</span>-->
<!--                <div class="block" style="margin-right:0.32rem;margin-top: -0.7rem">-->
<!--                    <el-date-picker v-model="valueTwo" type="date" style="" placeholder="选择日期"></el-date-picker>-->
<!--                </div>-->
<!--                <el-time-picker-->
<!--                        style="width:2.5rem"-->
<!--                        is-range-->
<!--                        v-model="value1"-->
<!--                        range-separator="至"-->
<!--                        start-placeholder="开始时间"-->
<!--                        end-placeholder="结束时间"-->
<!--                        placeholder="选择时间范围"-->
<!--                ></el-time-picker>-->
<!--            </div>-->
        </div>
        <!-- 直播概述 -->
        <div class="summarize">
            <div class="test">直播概述</div>
            <input type="text" class="inputSummarize" />
        </div>
        <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
        >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div class="uplodo">
            <div class="lodo">上传图片</div>
        </div>
        <!-- 底部提交 -->
        <div class="bottom">
            <div class="ti">提交</div>
<!--            <div class="shen">审核中</div>-->
        </div>
        <!-- 审核结果 -->
        <div class="audit">
            <div class="one">审核结果：</div>
            <div class="two">时间：4.13 9:00-12：00</div>
            <div class="three">备注：鉴于展位直播时间跟其它展商冲突，已为您进行调整，若有问题请在官网咨询在线客服</div>
        </div>
    </div>
</template>
<script>
    import {price} from "../../request/http";

    export default {
        name: "live",
        data() {
            return {
                valueOne: "",
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [
                        {
                            text: "今天",
                            onClick(picker) {
                                picker.$emit("pick", new Date());
                            }
                        },
                        {
                            text: "昨天",
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                picker.$emit("pick", date);
                            }
                        },
                        {
                            text: "一周前",
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit("pick", date);
                            }
                        }
                    ]
                },
                valueTwo: "",
                value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
                imageUrl: ""
            };
        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === "image/jpeg";
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error("上传头像图片只能是 JPG 格式!");
                }
                if (!isLt2M) {
                    this.$message.error("上传头像图片大小不能超过 2MB!");
                }
                return isJPG && isLt2M;
            }
        },
        mounted() {

        }
    };
</script>
<style lang="less" scoped>
    .offline {
        width: 15.8rem;
        // height: 5.3rem;
        // background: chartreuse;
        background: #ffffff;
        margin-left: 0.3rem;
        .top {
            width: 100%;
            height: 0.8rem;
            // background: chocolate;
            display: flex;
            align-items: center;
            .left {
                align-items: center;
                display: flex;

                span {
                    margin: 0 0.2rem 0 0.4rem;
                    font-size: 0.18rem;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: rgba(0, 76, 179, 1);
                }
                .inputOne {
                    width: 2rem;
                    height: 0.4rem;
                }
            }
            .time {
                width: 6.55rem;
                height: 100%;
                display: flex;
                align-items: center;
                // background: cornflowerblue;
                span {
                    margin: 0 0.28rem 0 0.51rem;
                    font-size: 0.18rem;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: rgba(0, 76, 179, 1);
                }
            }
            .add {
                font-size: 0.18rem;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: rgba(243, 155, 0, 1);
                margin-left: 0.3rem;
                margin-right: 1.7rem;
            }
            .right {
                font-size: 0.18rem;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(0, 76, 179, 1);
            }
        }
        .summarize {
            // width: 5rem;
            // height: 3rem;
            float: left;
            // background: crimson;
            margin-top: 0.58rem;
            display: flex;
            margin-right: 7.6rem;
            .test {
                font-size: 0.18rem;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(0, 76, 179, 1);
                margin: 0 0.34rem 0 0.58rem;
            }
            .inputSummarize {
                width: 3rem;
                height: 2rem;
            }
        }
        .uplodo {
            width: 100%;
            height: 0.4rem;
            // background: darkgoldenrod;
            margin-top: 0.2rem;
            .lodo {
                width: 1.2rem;
                height: 0.4rem;
                background: rgba(253, 95, 0, 1);
                border-radius: 0.05rem;
                font-size: 0.16rem;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: rgba(255, 255, 255, 1);
                text-align: center;
                line-height: 0.4rem;
                float: right;
                margin-right: 1.34rem;
            }
        }
        .bottom {
            width: 100%;
            height: 0.5rem;
            // background: royalblue;
            display: flex;
            .ti {
                width: 1.6rem;
                height: 0.5rem;
                background: rgba(0, 76, 179, 1);
                border-radius: 0.05rem;
                font-size: 0.18rem;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                text-align: center;
                line-height: 0.5rem;
                margin: 0 1.13rem 0 5.48rem;
            }
            .shen {
                width: 1.6rem;
                height: 0.5rem;
                background: rgba(153, 153, 153, 1);
                border-radius: 0.05rem;
                font-size: 0.18rem;
                font-family: Microsoft YaHei;
                font-weight: 400;
                text-align: center;
                line-height: 0.5rem;
                color: rgba(255, 255, 255, 1);
            }
        }
        .audit {
            display: flex;
            width: 15.8rem;
            // height: 1.2rem;
            align-items: flex-start;
            margin-top: 0.8rem;
            font-size: 0.16rem;
            .one {
                margin-left: 0.4rem;
                color: #e80037;
            }
            .two {
                margin: 0 1.45rem 0 0.64rem;
                color: #004cb3;
            }
            .three {
                color: #004cb3;
            }
        }
    }
    .avatar-uploader .el-upload {
        border-radius: 0.06rem;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        float: right;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 0.28rem;
        color: #8c939d;
        width: 3rem;
        height: 3rem;
        line-height: 1.78rem;
        text-align: center;
        border: 0.01rem solid rgba(204, 204, 204, 1);
        background: rgba(0, 0, 0, 0.3);
    }
    .avatar {
        width: 1.78rem;
        height: 1.78rem;
        display: block;
    }
</style>
